<template>
  <div class="xgybgboxround">
    <div class="lefttopround">
      <img src="../../assets/xgybground.png"
           alt="">
    </div>
    <div class="leftdownround"> <img src="../../assets/xgybground.png"
           alt=""></div>
    <div class="righttopround"> <img src="../../assets/xgybground.png"
           alt=""></div>
    <div class="rightdownround"> <img src="../../assets/xgybground.png"
           alt=""></div>

    <div class="leftborderbox borderbox">
      <div class="leftborder"></div>

    </div>
    <div class="bottomborderbox borderbox">
      <div class="bottomborder"></div>

    </div>
    <div class="rightborderbox borderbox">
      <div class="rightborder"></div>

    </div>
    <div class="topborderbox borderbox">
      <div class="topborder"></div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>

  </div>
</template>

<script>
export default {
  name: "XgyBgBoxRound"

}
</script>

<style lang="less" scoped>
.xgybgboxround {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: relative;
  .lefttopround {
    position: absolute;
    top: -0.05rem;
    left: -0.1rem;
  }
  .leftborderbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 2.15rem 0;
    .leftborder {
      background-color: #245767;
      width: 0.1rem;
      height: 100%;
    }
  }

  .rightborderbox {
    display: flex;
    justify-content: flex-end;
    padding: 2.15rem 0;
    align-items: center;
    .rightborder {
      background-color: #245767;
      width: 0.1rem;
      height: 100%;
    }
  }
  .bottomborderbox {
    display: flex;
    justify-content: center;
    padding: 0 2.15rem;
    align-items: flex-end;
    .bottomborder {
      background-color: #245767;
      width: 100%;
      height: 0.1rem;
    }
  }
  .topborderbox {
    display: flex;
    justify-content: center;
    padding: 0 2.15rem;
    align-items: flex-start;
    .topborder {
      background-color: #245767;
      width: 100%;
      height: 0.1rem;
    }
  }
  .leftdownround {
    position: absolute;
    bottom: -0.15rem;
    left: 0.0rem;
    transform: rotate(270deg);
  }
  .righttopround {
    position: absolute;
    top: -0.15rem;
    right: 0.05rem;
    transform: rotate(90deg);
  }
  .rightdownround {
    position: absolute;
    bottom: -0.05rem;
    right: -0.05rem;
    transform: rotate(180deg);
  }
  .borderbox {
    position: absolute;
    top: 0.0rem;
    left: 0.0rem;
    width: 100%;
    height: 100%;
  }
}
</style>